<template>
  <div class="home-wrap">
    <!-- 欢迎区域 -->
    <div class="welcome-section" :class="{ 'teacher-welcome': isTeacher }">
      <h1>{{ welcomeTitle }}</h1>
      <div class="system-intro">
        <p>{{ systemIntro }}</p>
      </div>
    </div>

    <!-- 功能卡片区域 -->
    <div class="features-section">
      <template v-if="isTeacher">
        <div class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-reading"></i>
          </div>
          <div class="feature-content">
            <div class="feature-title">我的课程</div>
            <div class="feature-desc">查看授课安排、学生名单及选课情况</div>
            <div class="feature-footer">
              <span class="feature-count">{{ teachingStats.courseCount || 0 }} 门课程</span>
              <router-link to="/teacher/course" class="feature-link">
                <el-button type="primary" size="small" icon="el-icon-right">进入查看</el-button>
              </router-link>
            </div>
          </div>
        </div>

        <div class="feature-card">
          <div class="feature-icon" style="background: #67C23A;">
            <i class="el-icon-date"></i>
          </div>
          <div class="feature-content">
            <div class="feature-title">教学课表</div>
            <div class="feature-desc">查看每周教学安排，合理规划授课时间</div>
            <div class="feature-footer">
              <span class="feature-count">{{ getTodayClassCount() }} 节今日课程</span>
              <router-link to="/teacher/timetable" class="feature-link">
                <el-button type="success" size="small" icon="el-icon-right">查看课表</el-button>
              </router-link>
            </div>
          </div>
        </div>

        <div class="feature-card">
          <div class="feature-icon" style="background: #E6A23C;">
            <i class="el-icon-edit"></i>
          </div>
          <div class="feature-content">
            <div class="feature-title">成绩管理</div>
            <div class="feature-desc">录入、修改和查询学生课程成绩信息</div>
            <div class="feature-footer">
              <span class="feature-count">{{ teachingStats.pendingGrades }} 待批改</span>
              <router-link to="/teacher/grade" class="feature-link">
                <el-button type="warning" size="small" icon="el-icon-right">录入成绩</el-button>
              </router-link>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="feature-card admin-card">
          <div class="card-top">
            <i class="el-icon-school feature-admin-icon"></i>
            <div class="feature-title">教学管理</div>
          </div>
          <div class="feature-desc">
            提供系部设置、专业配置、班级管理等功能，科学规划教学体系。
          </div>
          <div class="card-bottom">
            <router-link to="/admin/department" class="admin-link">系部管理</router-link>
            <router-link to="/admin/major" class="admin-link">专业管理</router-link>
            <router-link to="/admin/class" class="admin-link">班级管理</router-link>
          </div>
        </div>

        <div class="feature-card admin-card">
          <div class="card-top">
            <i class="el-icon-user feature-admin-icon"></i>
            <div class="feature-title">人员管理</div>
          </div>
          <div class="feature-desc">
            统一管理教师和学生信息，支持批量导入，确保人员信息准确性。
          </div>
          <div class="card-bottom">
            <router-link to="/admin/teacher" class="admin-link">教师管理</router-link>
            <router-link to="/admin/student" class="admin-link">学生管理</router-link>
          </div>
        </div>

        <div class="feature-card admin-card">
          <div class="card-top">
            <i class="el-icon-date feature-admin-icon"></i>
            <div class="feature-title">课程管理</div>
          </div>
          <div class="feature-desc">
            课程发布、学生选课、教师授课、成绩录入全流程管理系统。
          </div>
          <div class="card-bottom">
            <router-link to="/admin/course" class="admin-link">课程管理</router-link>
            <router-link to="/admin/student-course" class="admin-link">选课管理</router-link>
          </div>
        </div>
      </template>
    </div>

    <!-- 快捷操作区域 -->
    <div class="quick-actions" v-if="isAdmin">
      <h2>快捷操作</h2>
      <div class="action-list">
        <router-link to="/admin/department" class="action-item">
          <i class="el-icon-office-building"></i>
          <span>系部管理</span>
        </router-link>
        <router-link to="/admin/major" class="action-item">
          <i class="el-icon-reading"></i>
          <span>专业管理</span>
        </router-link>
        <router-link to="/admin/teacher" class="action-item">
          <i class="el-icon-user"></i>
          <span>教师管理</span>
        </router-link>
        <router-link to="/admin/student" class="action-item">
          <i class="el-icon-user-solid"></i>
          <span>学生管理</span>
        </router-link>
      </div>
    </div>

    <!-- 教师工作区域 -->
    <div class="work-section" v-if="isTeacher">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="work-card teaching-schedule">
            <div class="card-header">
              <h3><i class="el-icon-time"></i> 今日课程</h3>
            </div>
            <div class="card-content">
              <div class="schedule-item" v-if="todayCourses.length > 0">
                <div v-for="(course, index) in todayCourses" :key="index" class="course-item">
                  <div class="time">{{ course.time }}</div>
                  <div class="info">
                    <div class="name">{{ course.name }}</div>
                    <div class="location">
                      <i class="el-icon-location"></i>
                      {{ course.location }}
                    </div>
                  </div>
                  <div class="status">
                    <el-tag size="small" :type="getCourseStatus()">
                      {{ getCourseStatusText() }}
                    </el-tag>
                  </div>
                </div>
              </div>
              <div v-else class="empty-schedule">
                <i class="el-icon-coffee-cup"></i>
                <p>今天没有课程安排</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="work-card teaching-stats">
            <div class="card-header">
              <h3><i class="el-icon-data-analysis"></i> 教学统计</h3>
            </div>
            <div class="card-content">
              <div class="stat-item">
                <div class="label">授课课程</div>
                <div class="value">{{ teachingStats.courseCount || 0 }}</div>
              </div>
              <div class="stat-item">
                <div class="label">学生总数</div>
                <div class="value">{{ teachingStats.studentCount || 0 }}</div>
              </div>
              <div class="stat-item">
                <div class="label">待批改</div>
                <div class="value">{{ teachingStats.pendingGrades || 0 }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import UserType from "../common/userType";
import * as teacherApi from "../api/teacher/course";

export default {
  name: "Home",
  data() {
    return {
      todayCourses: [],
      teachingStats: {
        courseCount: 0,
        studentCount: 0,
        pendingGrades: 0
      }
    };
  },
  computed: {
    userType() {
      return this.$store.state.userType;
    },
    isTeacher() {
      return this.userType === UserType.teacher;
    },
    isAdmin() {
      return this.userType === UserType.admin;
    },
    welcomeTitle() {
      if (this.isTeacher) {
        return `欢迎您，${this.$store.state.userName} 老师`;
      }
      return '欢迎使用课程管理系统';
    },
    systemIntro() {
      if (this.isTeacher) {
        return '这里为您提供便捷的教学管理功能，包括课程查询、课表管理、成绩录入等服务。您可以轻松管理教学工作，提高教学效率。';
      }
      return '本系统是一个现代化的教务管理平台，旨在提供高效、便捷的课程管理服务。系统集成了教学管理的各个环节，包括系部管理、专业管理、班级管理、教师管理、学生管理等核心功能，为教学管理工作提供全方位的信息化支持。';
    }
  },
  methods: {
    async getTeacherData() {
      if (this.isTeacher) {
        try {
          const courses = await teacherApi.list();
          this.todayCourses = this.filterTodayCourses(courses);
          this.teachingStats.courseCount = courses.length;
          this.teachingStats.studentCount = courses.reduce((sum, course) => sum + course.selectedCount, 0);
          this.teachingStats.pendingGrades = Math.floor(Math.random() * 10); // 示例数据，实际应从API获取
        } catch (error) {
          console.error('获取教师数据失败:', error);
        }
      }
    },
    filterTodayCourses(courses) {
      // 这里可以根据实际需求过滤今日课程
      return courses.slice(0, 3); // 示例：显示前3个课程
    },
    getCourseStatus() {
      const now = new Date();
      const hour = now.getHours();
      // 这里可以根据实际的课程时间判断状态
      if (hour < 8) return 'info';
      if (hour < 12) return 'success';
      return 'warning';
    },
    getCourseStatusText() {
      const now = new Date();
      const hour = now.getHours();
      if (hour < 8) return '未开始';
      if (hour < 12) return '进行中';
      return '已结束';
    },
    getTodayClassCount() {
      return this.todayCourses.length;
    }
  },
  created() {
    this.getTeacherData();
  }
};
</script>

<style scoped>
.home-wrap {
  padding: 20px;
  min-height: calc(100vh - 140px);
  background: #f0f2f5;
}

.welcome-section {
  margin-bottom: 30px;
  padding: 30px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.welcome-section.teacher-welcome {
  background: linear-gradient(135deg, #e6f7ff 0%, #ffffff 100%);
  border-left: 4px solid #409EFF;
}

.welcome-section h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
}

.system-intro {
  color: #606266;
  line-height: 1.8;
  font-size: 14px;
}

.features-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.feature-card {
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.feature-icon i {
  font-size: 28px;
  color: #fff;
}

.feature-content {
  flex: 1;
}

.feature-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.feature-desc {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.feature-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.feature-count {
  color: #909399;
  font-size: 14px;
}

.feature-link {
  text-decoration: none;
}

/* 管理员卡片样式 */
.admin-card {
  flex-direction: column;
  padding: 0;
}

.card-top {
  display: flex;
  align-items: center;
  padding: 24px 24px 16px 24px;
}

.feature-admin-icon {
  font-size: 26px;
  color: #409EFF;
  margin-right: 12px;
}

.admin-card .feature-desc {
  padding: 0 24px 16px 24px;
  min-height: 60px;
}

.card-bottom {
  background: #f5f7fa;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid #ebeef5;
}

.admin-link {
  background: #fff;
  color: #409EFF;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.3s;
  border: 1px solid #dcdfe6;
}

.admin-link:hover {
  background: #ecf5ff;
  color: #409EFF;
  border-color: #c6e2ff;
}

.work-section {
  margin-top: 30px;
}

.work-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
}

.card-header h3 i {
  margin-right: 8px;
  color: #409EFF;
}

.card-content {
  padding: 20px;
}

.schedule-item .course-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
}

.schedule-item .course-item:last-child {
  border-bottom: none;
}

.schedule-item .course-item .time {
  width: 100px;
  color: #606266;
  font-weight: 500;
}

.schedule-item .course-item .info {
  flex: 1;
  margin: 0 20px;
}

.schedule-item .course-item .info .name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.schedule-item .course-item .info .location {
  font-size: 12px;
  color: #909399;
}

.schedule-item .course-item .info .location i {
  margin-right: 4px;
}

.empty-schedule {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.empty-schedule i {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-schedule p {
  margin: 0;
  font-size: 14px;
}

.teaching-stats .stat-item {
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
}

.teaching-stats .stat-item:last-child {
  border-bottom: none;
}

.teaching-stats .stat-item .label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.teaching-stats .stat-item .value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.quick-actions {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.quick-actions h2 {
  font-size: 18px;
  color: #303133;
  margin: 0 0 20px 0;
}

.action-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s;
}

.action-item:hover {
  transform: translateY(-5px);
  background: #ecf5ff;
}

.action-item i {
  font-size: 24px;
  color: #409EFF;
  margin-bottom: 12px;
}

.action-item span {
  font-size: 14px;
  color: #606266;
}
</style>
